<template>
  <div>
    <!-- 在需要获取的dom身上添加一个ref属性 ref -->
    <p ref="pref">{{msg}}</p>
    <div ref="divref">div</div>
    <button @click="getDom">改变数据并获取dom</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    getDom () {
      // 在vue中更新数据有个异步队列。
      this.msg = 'world'
      // 要获取到最新的渲染的dom的值， 就必须等到dom完全更新以后，再去获取值就好了
      this.$nextTick(() => {
        console.log(this.$refs.pref.innerHTML)
      })
    }
  }
}
</script>

<style>

</style>
